<template>
    <div class="detail">
        <Scroll class="scroll" ref="scroll" @pullingUp="loadMore" :probe-type="3" :pull-up-load="true">
            <detail-navbar :title="title"></detail-navbar>
            <Video :video-src="mvurl" ></Video>
<!--            <detail-t-v :video-src="mvurl" :video-img="imgurl"></detail-t-v>-->
            <DetailContext :title="title"
                           :palydate="publishTime"
                           :palynumber="playCount"
                           :singer="artistName"></DetailContext>
            <DetailComment :comment-list="commentList"></DetailComment>
        </Scroll>

    </div>
</template>

<script>

    import DetailNavbar from "@/views/detail821/childdetail821/DetailNavbar821";
    import {getDetail,getMVUrl,getComment} from "@/network821/detail821";
    import DetailTV from "@/views/detail821/childdetail821/DetailTV821";
    import Scroll from "@/components/common/scroll/Scroll";
    import DetailContext from "@/views/detail821/childdetail821/DetailContext821";
    import DetailComment from "@/views/detail821/childdetail821/DetailComment821";
    import Video from "@/components/common/videoPlayer/VideoXXX";

    export default {
        name: "detail",
        data(){
            return{
                mvid:"",
                title:"",
                //MV的地址
                mvurl:"",
                imgurl:"",
                artistName:"",
                playCount:"",
                publishTime:"",
                //评论
                commentId:0,
                commentList:[]
            }
        },
        components: {
            DetailNavbar,
            DetailTV,
            Scroll,
            DetailContext,
            DetailComment,
            Video
        },
        mounted(){
            this.mvid=this.$route.params.mvid
            this.getDetail()
            this.getMVUrl()
            this.getComment()
        },
        methods:{
            //获取详情页数据
            getDetail(){
                getDetail(this.mvid).then(res=>{
                    this.title=res.data.name
                    this.imgurl=res.data.cover
                    this.artistName=res.data.artistName
                    this.playCount=res.data.playCount
                    this.publishTime=res.data.publishTime
                })
            },
            //获取MV地址
            getMVUrl(){
                getMVUrl(this.mvid).then(res=>{
                    console.log(res.data.url);
                    this.mvurl=res.data.url
                })
            },
            //获取评论信息
            getComment(){
                console.log(this.commentId);
                getComment(this.mvid,20,this.commentId).then(res=>{
                    this.commentList.push(...res.comments)
                    this.commentId++
                    this.$refs.scroll.finishPullUp()
                })
            },
            //下拉加载更多
            loadMore(){
                this.getComment()
                this.$refs.scroll.scroll.refresh()
            }
        }
    }
</script>

<style scoped>
    .scroll{
        /*height: calc(100% - 49px);*/
        overflow:hidden;
    }
    .detail{
        height: 100vh;
        z-index: 44;
        background-color: #ffffff;
        position: relative;
    }
</style>